@extends('layout.master')
@section('body-class', 'page-seller-home')
@section('title', system_setting('base.meta_title', 'BeikeShop开源好用的跨境电商系统') . ' - ' . $seller->store_name)
@section('content')

@php
  function t($key) {
    return __('MultiSeller::multiseller_home.' . $key);
  }
@endphp

<div class="container mt-5">
  <div class="row">
    <div class="col-12 col-lg-3">
      <div class="card">
        <div class="card-header">
          <h5 class="card-title">{{ t('text_info') }}</h5>
        </div>
        <div class="card-body px-lg-4">
          <div class="text-center">
            <div class="logo m-auto mt-2 mb-4"><img src="{{ image_resize($seller->logo, 340, 340) }}" class="img-fluid"></div>
            <div class="name fs-5 fw-bold mb-1">{{ $seller->store_name }}</div>
            <div class="company">{{ t('company_name') }}: {{ $seller->company }}</div>
          </div>
          <hr>
          <ul class="seller-info list-group">
            <li><span>{{ t('text_contacter') }}</span>：<span>{{ $seller->store_name }}</span></li>
            <li><span>{{ t('text_phone') }}</span>：<span>{{ $seller->telephone }}</span></li>
            <li><span>{{ t('text_email') }}</span>：<a href="mailto:{{ $seller->email }}">{{ $seller->email }}</a></li>
            @if ($seller->zone)
            <li><span>{{ t('text_location') }}</span>：<span>{{ $seller->country->name }} {{ $seller->zone->name }}</span></li>
            @endif

            @if ($seller->settings['customer_service_link'] ?? false)
              <li class="contact-us-btn d-flex align-items-center"><span>{{ __('MultiSeller::common.contact_us') }}</span>：
                <a class="btn btn-outline-primary btn-sm" href="{{ $seller->settings['customer_service_link'] }}" target="_blank"><img src="{{ $seller->settings['customer_service_icon'] }}" class="me-2 img-fluid">{{ __('MultiSeller::common.contact_us') }}</a>
              </li>
            @endif

            @if ($seller->settings['customer_service_qrcode'] ?? false)
              <div class="text-center my-2 fw-bold">{{ __('MultiSeller::common.customer_service_qrcode') }}</div>
              <div class="d-flex justify-content-center">
                <img src="{{ $seller->settings['customer_service_qrcode'] }}" class="img-fluid w-75">
              </div>
            @endif
          </ul>
        </div>
      </div>
    </div>
    <div class="col-12 col-lg-9">
      <div class="card mb-4">
        <div class="card-header">
          <h5 class="card-title">{{ t('text_description') }}</h5>
        </div>
        <div class="card-body">
          <div class="description">
            @if ($seller->banner)
            <img src="{{ image_origin($seller->banner) }}" class="img-fluid mb-2">
            @endif
            {!! $seller->description !!}
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-header">
          <h5 class="card-title">{{ t('text_product_list') }}</h5>
        </div>
        <div class="card-body">
          @if ($products->count())
          <div class="row">
            @foreach ($items as $product)
            <div class="col-6 col-md-4 col-lg-3">
              @include('shared.product')
            </div>
            @endforeach
          </div>
          @else
          <x-shop-no-data />
          @endif
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('add-scripts')
<style>
  body {
    background-color: #f5f5f5;
  }

  .seller-info > li {
    display: grid;
    grid-template-columns: 62px 16px 1fr;
    padding: 0.4rem 0;
    font-size: .9rem;
  }

  .seller-info > li a {
    color: #3f51b5;
  }

  .seller-info > li > span:first-child {
    text-align-last: justify;
    color: #666;
  }

  .contact-us-btn a {
    border-radius: 4px;
  }

  .contact-us-btn a:hover {
    color: #fff;
  }

  .contact-us-btn a img {
    width: 20px;
  }
</style>
@endpush
